<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="custom-button">
  <style>
    img {
      cursor: pointer;
    }
  </style>
  <template>
    <img id="image" src="{{imageDefault}}" />
  </template>
</dom-module>

<script type="module">
Polymer({
  is: 'custom-button',
  properties: {
    imageDefault: {
      type: String,
      value: '',
      notify: true
    },
    imageHover: {
      type: String,
      value: '',
      notify: true
    },
    imageActive: {
      type: String,
      value: '',
      notify: true
    }
  },
  ready: function() {
    let $scope = this,
      img_element = $scope.$.image,
      changeImage = function(state) {
        return function() {
          let image_url = $scope[`image${state}`]
          if(!image_url) {
            image_url = $scope['imageHover']
            if(!image_url) {
              image_url = $scope['imageDefault']
            }
          }
          img_element.src = image_url
        }
      },
      addEventsListener = function(ele, handler_dict) {
        for(let event_name in handler_dict){
          ele.addEventListener(event_name, handler_dict[event_name])
        }
      }
    
    addEventsListener(img_element, {
      'mouseover': changeImage('Hover'),
      'mouseout': changeImage('Default'),
      'mousedown': changeImage('Active'),
      'mouseup': changeImage('Hover'),
      'drag': changeImage('Default')
    })
  }
})
</script>

<script>
(function processInclude() {
  'use strict'
  var doc = document.currentScript.ownerDocument,
    transcoder = new traceur.WebPageTranscoder(doc.URL),
    selector = 'script[type="module"],script[type="text/traceur"]',
    scripts = doc.querySelectorAll(selector)

  if (scripts.length) {
    transcoder.addFilesFromScriptElements(scripts, function() {})
  }
})()
</script>